<script setup lang="ts">
//自助服务
import SelfIcon from "@/assets/base/serve/auto/self-icon.png";
import SelfIcon2x from "@/assets/base/serve/auto/self-icon@2x.png";

import Accident from "@/assets/base/serve/auto/page-accident.png";
import Accident2x from "@/assets/base/serve/auto/page-accident@2x.png";

import Delay from "@/assets/base/serve/auto/page-delay.jpg";
import Delay2x from "@/assets/base/serve/auto/page-delay@2x.jpg";

const imgSelfIcon = `url(${SelfIcon})`;
const imgSelfIcon2x = `url(${SelfIcon2x})`;

const imgAccident = `url(${Accident})`;
const imgAccident2x = `url(${Accident2x})`;

const imgDelay = `url(${Delay})`;
const imgDelay2x = `url(${Delay2x})`;

const fiveData = [
  {
    id: 1,
    class: "daodian",
    title: "到店快修",
    sub_title: "线下服务网点信息",
    link: "#",
  },
  {
    id: 2,
    class: "quanguo",
    title: "发起售后",
    sub_title: "通过 IMEI 号或 SN 号发起售后",
    link: "#",
  },
  {
    id: 3,
    class: "query-insurance",
    title: "保修查询",
    sub_title: "激活及保修信息查询",
    link: "#",
  },
  {
    id: 4,
    class: "weixiu",
    title: "维修价格",
    sub_title: "手机维修报价查询",
    link: "#",
  },
  {
    id: 5,
    class: "fuwu",
    title: "服务政策",
    sub_title: "官方/合作厂商商品售后政策",
    link: "#",
  },
];
const twoData = [
  {
    id: 1,
    class: "broken",
    title: "“屏幕意外摔碎，可以免费更换? ”",
    sub_title: "坚果 R2、坚果 Pro 3 意外碎屏保修服务",
    link: "#",
  },
  {
    id: 2,
    class: "delay",
    title: "Smartisan 延长保修服务",
    sub_title: "坚果 R2、Smartisan TNT go、坚果 Pro 3 ",
    link: "#",
  },
];
</script>
<template>
  <div class="box box-self">
    <header class="title-header">
      <h5 class="title">自助服务</h5>
    </header>
    <div class="panel-content">
      <ul class="banner-list clearfix">
        <li v-for="item in fiveData" :key="item.id" :class="item.class">
          <h3 class="title">{{ item.title }}</h3>
          <p class="sub-title">{{ item.sub_title }}</p>
          <a :href="item.link"></a>
        </li>
      </ul>
      <ul class="insurance-list clearfix">
        <li v-for="item in twoData" :key="item.id" :class="item.class">
          <h3 class="title">{{ item.title }}</h3>
          <p class="sub-title">{{ item.sub_title }}</p>
          <a :href="item.link"><span>进一步了解详情</span></a>
          <a :href="item.link" class="cover"></a>
        </li>
      </ul>
    </div>
  </div>
</template>
<style scoped lang="less">
.box {
  .banner-list {
    > li {
      float: left;
      box-sizing: border-box;
      border-right: 1px solid #ececec;
      border-bottom: 1px solid #ececec;
    }
    li {
      position: relative;
      text-align: center;
      width: 20%;
      height: 270px;
      .title {
      
        --bg-image: v-bind(imgSelfIcon);
        --bg-image-2x: v-bind(imgSelfIcon2x);
        padding: 160px 0 10px;
        font-size: 16px;
        color: #333;
        line-height: 1em;
        background-repeat: no-repeat;
        background-size: auto 59px;
        background-position-y: 70px;
        background-image: var(--bg-image);
        background-image: -webkit-image-set(
          var(--bg-image) 1x,
          var(--bg-image-2x) 2x
        );
        background-position-x: 70px;
      }
      .sub-title {
        font-size: 12px;
        color: #999;
        line-height: 1em;
      }
      a {
        position: absolute;
        display: none;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        box-shadow: inset 0 0 38px rgba(0, 0, 0, 0.08);
        transition: all 0.15s ease;
      }
    }
    li:hover {
      a {
        display: block;
      }
    }
    li.daodian .title {
      background-position-x: 90px;
    }
    li.quanguo .title {
      background-position-x: -110px;
    }
    li.query-insurance .title {
      background-position-x: -1086px;
    }
    li.weixiu .title {
      background-position-x: -517px;
    }
    li.fuwu .title {
      background-position-x: -314px;
    }
  }
  .insurance-list {
    li {
      position: relative;
      box-sizing: border-box;
      float: left;
      width: 609px;
      height: 200px;
      padding: 55px 0 0 210px;
      text-align: center;
      background-repeat: no-repeat;
      h3 {
        font-size: 20px;
        line-height: 1em;
        color: #d44d44;
        margin-bottom: 15px;
      }
      p {
        font-size: 14px;
        line-height: 1em;
        color: #bbb;
        margin-bottom: 30px;
      }
      a {
        font-size: 14px;
        line-height: 1em;
      }
      a.cover {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
      }
    }
    li:first-child {
      border-right: 1px solid #ececec;
    }
  }
  .insurance-list {
    li.broken {
      --bg-image: v-bind(imgAccident);
      --bg-image-2x: v-bind(imgAccident2x);
      background-position: 55px;
      background-size: 185px auto;
      background-image: var(--bg-image);
      background-image: -webkit-image-set(
        var(--bg-image) 1x,
        var(--bg-image-2x) 2x
      );
    }
    li.delay {
      --bg-image: v-bind(imgDelay);
      --bg-image-2x: v-bind(imgDelay2x);
      background-position: 87px;
      background-size: 126px auto;
      background-image: var(--bg-image);
      background-image: -webkit-image-set(
        var(--bg-image) 1x,
        var(--bg-image-2x) 2x
      );
    }
  }
}
</style>
